<template>
  <div class="dynamic-qrCode-container">
    <div class="dynamic-operate">
      <el-input
        class="common-input input-qrCode"
        v-model="text"
        clearable
      ></el-input>
      <el-button type="primary" class="common-button" @click="handleQrCode(1)">生成普通二维码</el-button>
      <el-button type="primary" class="common-button" @click="handleQrCode(2)">生成带logo二维码</el-button>
      <el-button type="primary" class="common-button" @click="handleQrCode(3)">生成随机颜色二维码</el-button>
      <el-button type="primary" class="common-button" @click="handleQrCode(4)">下载二维码</el-button>
    </div>
    <vue-qr
      ref="qrCode"
      :text="text"
      :logoSrc="logoSrc"
      :color-dark="randomColor"
      :callback="qrCodeCallback"
      width="100"
      height="100"
    ></vue-qr>
    <div class="official-word">官方文档:
      <a href="https://github.com/Binaryify/vue-qr" target="_blank">https://github.com/Binaryify/vue-qr</a>
    </div>
    <div class="regional_table">
      <el-table
        :data="tableData"
        :border="true"
        height="calc(100vh - 410px)"
        :span-method="arraySpanMethod"
        :row-class-name="tableRowClassName"
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column :resizable="false" label="参数" prop="params"></el-table-column>
        <el-table-column :resizable="false" label="说明" prop="declare"></el-table-column>
        <el-table-column :resizable="false" label="必要性" prop="necessary"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import logo from '@/assets/image/logo.png'
import { getColor } from '@/utils/index.js'
import variables from '@/styles/variables.scss'
export default {
  name: 'dynamicQrCode',
  components:{
    VueQr,
  },
  data(){
    return{
      text: 'https://zhuanlan.zhihu.com/p/427065468',
      logoSrc: '',
      randomColor: 'black',
      qrCodeUrl: '', // 存放生成的二维码url
      tableData:[
        {params:'—————————————————————— 基础 ——————————————————————'},
        {params:'text', declare:'二维码内容', necessary:'必需'},
        {params:'size', declare:'尺寸, 长宽一致, 包含外边距', necessary:'必需'},
        {params:'margin', declare:'二维码图像的外边距, 默认 20px', necessary:'可选'},
        {params:'dotScale', declare:'数据区域点缩小比例,默认为0.35', necessary:'可选'},
        {params:'correctLevel', declare:'容错级别 0-3', necessary:'可选'},
        {params:'whiteMargin', declare:'若设为 true, 背景图外将绘制白色边框（默认是true）', necessary:'可选'},
        {params:'bindElement', declare:'指定是否需要自动将生成的二维码绑定到HTML上（默认是true）', necessary:'可选'},
        {params:'callback', declare:'生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)', necessary:'可选'},
        {params:'备注：可以使用 bindElement 来指定要自动填入二维码图像的元素的ID(不含前导[#]，支持<div>或是<img>)',declare: ''},
        {params:'—————————————————————— 颜色 ——————————————————————'},
        {params:'colorDark', declare:'实点的颜色', necessary:'可选'},
        {params:'colorLight', declare:'空白区的颜色', necessary:'可选'},
        {params:'autoColor', declare:'若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true', necessary:'可选'},
        {params:'备注：若设置了 autoColor，则 colorDark 和 colorLight 都将被忽略',declare: ''},
        {params:'—————————————————————— 背景图像 ——————————————————————'},
        {params:'bgSrc', declare:'欲嵌入的背景图地址', necessary:'可选'},
        {params:'gifBgSrc', declare:'欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能', necessary:'可选'},
        {params:'backgroundColor', declare:'背景色', necessary:'可选'},
        {params:'backgroundDimming', declare:'叠加在背景图上的颜色, 在解码有难度的时有一定帮助', necessary:'可选'},
        {params:'备注：若设定了 gifBackground ，则 backgroundImage 将会被忽略',declare: ''},
        {params:'—————————————————————— logo图像 ——————————————————————'},
        {params:'logoSrc', declare:'嵌入至二维码中心的 LOGO 地址', necessary:'可选'},
        {params:'logoScale', declare:'用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2', necessary:'可选'},
        {params:'logoMargin', declare:'标识周围的空白边框, 默认为0', necessary:'可选'},
        {params:'logoBackgroundColor', declare:'背景色,需要设置 logo margin', necessary:'可选'},
        {params:'logoCornerRadius', declare:'标识及其边框的圆角半径, 默认为0', necessary:'可选'},
        {params:'—————————————————————— 后处理 ——————————————————————'},
        {params:'binarize', declare:'若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false', necessary:'可选'},
        {params:'binarizeThreshold', declare:'(0 < threshold < 255) 二值化处理的阈值', necessary:''},
      ]
    }
  },
  computed:{
    variables(){
      return variables
    },
  },
  methods:{
    qrCodeCallback(url){
      this.qrCodeUrl = url
    },
    handleQrCode(type){
      switch (type){
        case 1:
          this.randomColor = 'black'
          this.logoSrc = ''
          break
        case 2:
          this.logoSrc = logo
          break
        case 3:
          this.randomColor = getColor()
          break
        case 4:
          let name  = new Date().getTime();
          let a = document.createElement("a");
          a.style.display = "none";
          a.download = name;
          a.href = this.qrCodeUrl;
          document.body.appendChild(a);
          a.click();
          a.remove()
          break
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
      if (Object.keys(row).length == 1 || Object.keys(row).length == 2) {
        if (columnIndex === 0) {
          return [1, 3]
        }
      }
    },
    tableRowClassName({row, rowIndex}){
      let arr = []
      if (Object.keys(row).length == 1) {
        arr.push('column-declare')
      }
      if (Object.keys(row).length == 2) {
        arr.push('column-remark')
      }
      return arr.join(' ')
    },
  }
}
</script>

<style lang="scss" scoped>
.input-qrCode{
  width: 300px;
  margin-right: 20px;
}
.official-word{
  height: 30px;
  width: 100%;
  line-height: 30px;
}
/*最外层透明*/
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: #606266;
}
/* 表格内背景颜色 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  //表格字体颜色
  color: #606266;
}
</style>

<style lang="scss">
.input-qrCode{
  .el-input__inner{
    border-radius: 10px;
  }
}
.el-table{
  .column-declare {
    td {
      .cell {
        color: #393939;
        text-align: center;
      }
    }
  }
}
</style>
